<template>
  <div class="query-page">
    <div class="res-header" v-if="totalSize">
      {{majorTableData && majorTableData.school ? majorTableData.school : '-'}}
      <div class="toggle-wrap">
        <a href="javascript:;" class="btn-toggle" @click="showAllToggle(showAll)">一键{{showAll ? '收起' :　'展开'}}</a>
      </div>
    </div>
    <div class="txt-center loading-wrap" v-if="loading">
      <inline-loading></inline-loading><span class="loading-txt">加载中...</span>
    </div>
    <div class="null-cont" v-if="!loading && !totalSize">
      没有匹配到相关的院校和专业<br />请适当调整你的筛选条件
    </div>
    <div class="school-header" v-if="majorTableData && majorTableData.majors.length">
      <div class="w33">国家代码: {{majorTableData && majorTableData.code ? majorTableData.code : '-'}}</div>
      <div class="w33">省内代码: {{majorTableData && majorTableData.incode ? majorTableData.incode : '-'}}</div>
      <div class="w33">地区: {{majorTableData && majorTableData.province ? provinceCity(majorTableData.province, majorTableData.city) : '-'}}</div>
    </div>
    <div class="school-wrap" v-if="majorTableData && majorTableData.majors.length">
      <ul class="school-list">
        <li v-for="(item, idx) in majorTableData.majors" :key="idx">
          <div class="s-title" @click="showItemToggle(idx)">
            <span class="s-name">{{`${idx+1}、${item.major}`}}</span>
            <div class="s-major-wrap">
              <span class="s-major">专业代码:{{item.mcode}}</span>
            </div>
            <i class="iconfont icon-jiantouxia i-more" :class="[{'show': item.show}]"></i>
          </div>
          <div class="s-body" :class="[{'animate': item.show}]">
            <div class="s-block s-tip" v-if="item && item.remark">
              <span>简注：{{item.remark}}</span>
            </div>
            <div class="s-block">
              <div class="w66">2019学制/学费: {{`${item.year} / ${item.fee}`}}</div>
              <div class="w33" style="text-align: right;">招生人数: {{`${item.amount == '/' ? '-' : item.amount}`}}</div>
            </div>
            <!-- <div class="s-block">
              <div class="w33">院校代码: {{item.incode}}</div>
              <div class="w33">专业代码: {{item.mcode}}</div>
              <div class="w33">学年/学费: {{item.year}} / {{item.fee}}</div>
            </div> -->
            <div class="s-block">
              <span>2018录取最低分数/位次: {{(item.lowscore2018 == 0 || item.lowscore2018 == '/' ? '-' : item.lowscore2018) + ' / ' + (item.lowrank2018 == 0 || item.lowrank2018 == '/' ? '-' : item.lowrank2018)}}</span>
            </div>
            <div class="s-block">
              <span>2017录取最低分数/位次: {{(item.lowscore2017 == 0 || item.lowscore2017 == '/' ? '-' : item.lowscore2017) + ' / ' + (item.lowrank2017 == 0 || item.lowrank2017 == '/' ? '-' : item.lowrank2017)}}</span>
            </div>
            <div class="s-block">
              <div class="w50">批次: {{item.plan}}</div>
              <div class="w50">选考科目: {{toChinese(item.subject)}}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Utils from '@/common/utils.js'
import { InlineLoading } from 'vux'
export default {
  name: 'planResult',
  components: {
    InlineLoading
  },
  data() {
    return {
      majorTableData: {
        majors: []
      },
      loading: true,
      totalSize: 0,
      showAll: false
    }
  },
  created() {
    setTimeout(() => {
      this.majorTableData = JSON.parse(Utils.session('majorTableData'))
      console.log('============', this.majorTableData)
      this.totalSize = this.majorTableData.majors.length
      this.loading = false
    }, 500)
  },
  methods: {
    // 展开/收起
    showItemToggle(idx) {
      let item = this.majorTableData.majors[idx]
      item.show = !item.show
      this.$set(this.majorTableData.majors, idx, item)
    },
    // 一键展开/收起
    showAllToggle() {
      this.showAll = !this.showAll
      this.majorTableData.majors.map((item, idx) => {
        item.show = this.showAll
      })
    },
    // 返回省市
    provinceCity(province, city) {
      if (
        province === '北京' ||
        province === '上海' ||
        province === '重庆' ||
        province === '天津'
      ) {
        return city
      } else {
        return province + city.substring(0, city.length)
      }
    },
    // 转表格专业
    toChinese(arr) {
      let array = arr || new Array(7).fill(0)
      array = arr.split(',')
      let sub = ['化学', '历史', '地理', '政治', '技术', '物理', '生物']
      let selSub = []
      array.forEach((v, index) => {
        if (v == 1) {
          selSub.push(sub[index]);
        }
      });
      if (selSub.length === 7 || selSub.length === 0) {
        return '不限'
      } else {
        return selSub.join(',')
      }
    }
  },
  beforeDestroy() {
    this.queryData = null
  }
}
</script>


<style lang="scss" scoped>
.query-page {
  height: 100%;
}
.res-header {
  padding: 0.266667rem 0.266667rem;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  &.res-header-h {
    background-color: #ffa440;
    color: #fff;
    padding: 0.166667rem 0.166667rem;
    position: fixed;
    width: 100%;
    z-index: 999;
    .btn-toggle {
      background-color: #fff;
      color: #ffa440;
      padding: 0.063333rem 0.166667rem;
      margin-right: 0 !important;
      background-image: none;
    }
  }
  .toggle-wrap {
    position: absolute;
    right: 0.266667rem;
    top: 0.16rem;
    display: inline-flex;
  }
  .btn-toggle {
    padding: 0.133333rem 0.266667rem;
    font-size: 13px;
    background-image: linear-gradient(90deg, #ffa440 0%, #ff8600 100%);
    border-radius: 0.08rem /* 3/37.5 */;
    color: #fff;
    &.btn-gohome {
      margin-right: 0.266667rem /* 10/37.5 */;
    }
  }
}
.loading-wrap {
  padding: 1.333333rem;
  .loading-txt {
    vertical-align: middle;
    display: inline-block;
    font-size: 14px;
    margin-left: 0.16rem;
  }
}
.null-cont {
  padding-top: 2.666667rem;
  font-size: 14px;
  color: #666;
  text-align: center;
  line-height: 0.586667rem;
  position: relative;
  z-index: 100000;
  background-color: #fff;
}
.school-wrap {
  height: calc(100% - 2rem);
  overflow: auto;
}
.school-list {
  color: #333;
  li {
    border-bottom: 1px solid #fff;
  }
  .s-title {
    font-size: 14px;
    padding: 0.16rem 0 0.16rem 0.266667rem;
    background-color: #ffd9b0;
    position: relative;
    .s-name {
      width: 50%;
      display: inline-block;
      vertical-align: middle;
    }
    .s-major-wrap {
      width: 40%;
      display: inline-block;
      vertical-align: middle;
      padding-left: 0.693333rem;
      position: relative;
    }
    .i-more {
      position: absolute;
      right: 0;
      top: 0;
      color: #333;
      padding: 0 0.266667rem;
      height: 100%;
      display: flex;
      align-items: center;
      transition: all 0.2s;
      transform: rotate(0deg);
    }
    .i-more.show {
      transform: rotate(180deg);
    }
  }
  .s-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
    .s-block {
      padding: 0.16rem 0.266667rem;
      font-size: 13px;
      display: flex;
      &:nth-child(2n) {
        background-color: #f2f2f2;
      }
    }
    .s-tip {
      color: #999;
      font-size: 12px;
    }
  }
}
.school-header {
  display: flex;
  padding: 0.16rem 0.266667rem;
  font-size: 13px;
}
.w33 {
  width: 33.333333%;
}
.w50 {
  width: 50%;
}
.w66 {
  width: 66.666666%;
}
.school-wrap-h {
  padding-top: 1.4rem;
  .sw-head {
    background-color: #e7eef4;
    position: fixed;
    width: 100%;
    top: 0.72rem;
    z-index: 999;
    display: table-row;
    .swh-item {
      display: table-cell;
      border-right: 1px solid #fff;
      padding: 0.063333rem 0 /* 5/37.5 */;
      text-align: center;
      color: #ff8600;
      font-size: 13px;
      line-height: 15px;
      vertical-align: middle;
      &:last-child {
        border-right: none;
      }
    }
  }
  .sw-body {
    .sw-row {
      &:nth-child(2n) {
        background-color: #f8f9fb;
      }
    }
    .sw-data {
      display: table-row;
      .sw-item {
        display: table-cell;
        padding: 0.1rem 0.06rem;
        text-align: center;
        font-size: 13px;
        vertical-align: middle;
        &.name {
          text-align: left;
        }
      }
    }
  }
}
.s-major-wrap {
  position: relative;
  .s-tip {
    width: 0.533333rem;
    height: 0.746667rem;
    position: absolute;
    top: calc((100% - 0.693333rem) / 2);
    left: 0;
    background-size: 100%;
    line-height: 0.426667rem;
    font-size: 13px;
    color: #fff;
    text-align: center;
    background-repeat: no-repeat;
    &.w {
      background-image: url(../../assets/images/i_w.png);
    }
    &.b {
      background-image: url(../../assets/images/i_b.png);
    }
    &.c {
      background-image: url(../../assets/images/i_c.png);
    }
  }
}
.school-wrap-h {
  .s-major-wrap {
    text-align: left !important;
    padding-left: 0.4rem !important;
    .s-tip {
      width: 0.333333rem;
      height: 0.546667rem;
      font-size: 10px;
      line-height: 0.3rem;
      top: inherit;
    }
  }
}
.remark {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #666;
  text-align: left;
  font-size: 12px;
  padding: 0.06rem 0.15rem;
}
.share {
  float: right;
  margin-left: 0.106667rem /* 4/37.5 */;
  height: 0.714667rem /* 26.8/37.5 */;
  img {
    width: 0.714667rem /* 26.8/37.5 */;
    height: auto;
    cursor: pointer;
    margin-left: 0.106667rem /* 4/37.5 */;
  }
}
.tip {
  position: fixed;
  top: 25%;
  left: calc(50% - 4.666667rem /* 175/37.5 */);
  width: 9.333333rem /* 350/37.5 */;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0.16rem /* 6/37.5 */;
  transition: 1s all;
  opacity: 0;
  p {
    color: #fff;
    font-size: 15px;
    padding: 0.106667rem /* 4/37.5 */;
    img {
      width: 0.5rem /* 24/37.5 */;
      vertical-align: middle;
    }
  }
}
</style>
